<template>
  <div class="filter-name">
    <button
      class="px-2 rounded border overflow-hidden text-ellipsis"
      :class="{
        'border-gray-500': showAsActive,
        'border-gray-900': !showAsActive,
      }"
      @click="toggleAccuracy"
    >
      {{ label }}
    </button>
    <button
      v-if="filters.corrupted"
      class="px-2"
      @click="corrupted = !corrupted"
    >
      <span v-if="corrupted" class="text-red-500">{{
        t("item.corrupted")
      }}</span>
      <span v-else class="text-gray-600">{{ t("item.not_corrupted") }}</span>
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed } from "vue";
import { useI18n } from "vue-i18n";
import type { ParsedItem } from "@/parser";
import type { ItemFilters } from "./interfaces";
import { CATEGORY_TO_TRADE_ID } from "../trade/pathofexile-trade";

export default defineComponent({
  name: "FilterName",
  props: {
    filters: {
      type: Object as PropType<ItemFilters>,
      required: true,
    },
    item: {
      type: Object as PropType<ParsedItem>,
      required: true,
    },
  },
  setup(props) {
    const { t } = useI18n();

    const label = computed(() => {
      const { filters } = props;
      const activeSearch =
        filters.searchRelaxed && !filters.searchRelaxed.disabled
          ? filters.searchRelaxed
          : filters.searchExact;

      if (activeSearch.name) {
        return activeSearch.name;
      }
      if (activeSearch.baseType) {
        return activeSearch.baseType;
      }
      if (activeSearch.category) {
        const tradeId = CATEGORY_TO_TRADE_ID.get(activeSearch.category)!;
        return t("item_category.prop", [
          t(`item_category.${tradeId.replace(".", "_")}`),
        ]);
      }

      return "??? Report if you see this text";
    });

    const showAsActive = computed(() => {
      const { filters } = props;
      return filters.searchRelaxed?.disabled;
    });

    function toggleAccuracy() {
      const { filters } = props;
      if (filters.searchRelaxed) {
        filters.searchRelaxed.disabled = !filters.searchRelaxed.disabled;
      }
    }

    const corrupted = computed<boolean>({
      get() {
        return props.filters.corrupted!.value;
      },
      set(value) {
        props.filters.corrupted!.value = value;
      },
    });

    return {
      t,
      label,
      showAsActive,
      toggleAccuracy,
      corrupted,
    };
  },
});
</script>

<style lang="postcss">
.filter-name {
  @apply bg-gray-900 mb-2 rounded;
  line-height: 1.25rem;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}
</style>
